<template>
    <!-- <h1>通话</h1> -->
    <div style="background:white;margin-top:10px;display:flex">
        <div style="width:280px;margin-left:15px;background:white">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="来电" name="first">
                    <div>
                        <!-- <p><input type="text" placeholder="搜索姓名/电话"></p> -->
                        <el-form-item style="width: 250px; ">
                            <el-input v-model="form.name" value="" placeholder="搜索姓名/电话" style="height:25px" />
                        </el-form-item>
                        <div style="margin-bottom:15px">
                            <div style="display:flex">
                                <div>
                                    <p style="margin-top:10px">王伟</p>
                                    <p style="margin-top:10px">188****6789(杭州市)</p>
                                    <p style="color:gray;margin-top:10px">021-05218900</p>
                                </div>
                                <div style="margin-left:40px">
                                    <p style="color:gray;margin-top:10px">10:12</p>
                                    <p style="color:#ffc71c;margin-top:10px">已接通</p>
                                    <p
                                        style="background:#2ed477;width:80px;text-align:center;border-radius:5px;color:white;margin-top:10px">
                                        潜在客户</p>
                                </div>
                            </div>
                        </div>
                        <div style="margin-bottom:15px">
                            <div style="display:flex">
                                <div>
                                    <p style="margin-top:10px">王伟</p>
                                    <p style="margin-top:10px">188****6789(杭州市)</p>
                                    <p style="color:gray;margin-top:10px">021-05218900</p>
                                </div>
                                <div style="margin-left:40px">
                                    <p style="color:gray;margin-top:10px">10:12</p>
                                    <p style="color:#ffc71c;margin-top:10px">已接通</p>
                                    <p
                                        style="background:#2ed477;width:80px;text-align:center;border-radius:5px;color:white;margin-top:10px">
                                        潜在客户</p>
                                </div>
                            </div>
                        </div>
                        <div style="margin-bottom:15px">
                            <div style="display:flex">
                                <div>
                                    <p style="margin-top:10px">王伟</p>
                                    <p style="margin-top:10px">188****6789(杭州市)</p>
                                    <p style="color:gray;margin-top:10px">021-05218900</p>
                                </div>
                                <div style="margin-left:40px">
                                    <p style="color:gray;margin-top:10px">10:12</p>
                                    <p style="color:#ffc71c;margin-top:10px">已接通</p>
                                    <p
                                        style="background:#2ed477;width:80px;text-align:center;border-radius:5px;color:white;margin-top:10px">
                                        潜在客户</p>
                                </div>
                            </div>
                        </div>
                        <div style="margin-bottom:15px">
                            <div style="display:flex">
                                <div>
                                    <p style="margin-top:10px">王伟</p>
                                    <p style="margin-top:10px">188****6789(杭州市)</p>
                                    <p style="color:gray;margin-top:10px">021-05218900</p>
                                </div>
                                <div style="margin-left:40px">
                                    <p style="color:gray;margin-top:10px">10:12</p>
                                    <p style="color:#ffc71c;margin-top:10px">已接通</p>
                                    <p
                                        style="background:#2ed477;width:80px;text-align:center;border-radius:5px;color:white;margin-top:10px">
                                        潜在客户</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="去电" name="second" @click="add">去电</el-tab-pane>
            </el-tabs>
        </div>
        <div style="margin-left: 60px;">
            <div style="display:flex">
                <div style="margin-top:20px;margin-left:20px;border-radius:5px"><img src="../../assets/logo.png"
                        width="100px" height="100px" alt="">
                </div>
                <div style="margin-left:20px;margin-top:50px">
                    <p>王伟<span style="color:gray;font-size:13px;margin-left:10px">北京</span><span
                            style="background:#2ed477;color:white;border-radius:5px;margin-left:10px">潜在客户</span></p>
                    <p style="margin-top:10px">157****0989</p>
                </div>
            </div>
            <hr>
            <div style="margin-left:20px;margin-top:10px">
                <p>创建工单</p>
                <div style="display:flex;margin-top:20px">
                    <el-form-item label="工单分类" prop="region" style="width:330px">
                        <el-select v-model="ruleForm.region" placeholder="请选择">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left:50px" label="工单标题" prop="请输入工单标题" placeholder="请输入工单标题">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="工单描述" prop="desc" placeholder="请输入工单描述">
                        <el-input v-model="ruleForm.desc" type="textarea" />
                    </el-form-item>
                    <el-form-item style="width:330px;margin-left:120px" label="抄送人" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="优先级" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio value="di">低</el-radio>
                            <el-radio value="zhong">中</el-radio>
                            <el-radio value="gao">高</el-radio>
                            <el-radio value="jinji">紧急</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item style="width:330px;margin-left:70px" label="工单状态" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item style="width:330px;" label="受理客服组" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width:330px;margin-left:50px" label="受理客服" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item style="width:330px;" label="所属客户" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="请选择">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </div>
                <button
                    style="background:#006eff;border:none;color:#fff;width:80px;height:30px;border-radius:5px;">创建工单</button>


            </div>
        </div>
        <div style="margin-left:50px">
            <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick1">
                <el-tab-pane label="资料" name="first">
                    <div>
                        <!-- <p><input type="text" placeholder="搜索姓名/电话"></p> -->
                        <el-form-item style="width: 250px; ">
                            <div style="margin-left:50px">
                                <h4>访客信息</h4>
                                <p><span style="color:gary">来源</span><span>113.128.230.51</span></p>
                                <p><span style="color:gary">IP</span><span>113.128.230.51</span></p>
                                <p><span style="color:gary">浏览器</span><span>Chrome 81.0.4044.138</span></p>
                                <p><span style="color:gary">屏幕尺寸</span><span>1440x900</span></p>
                                <p><span style="color:gary">设备</span><span>Mac</span></p>
                                <hr>
                                <h4>客户信息</h4>
                                <p><span style="color:gary">客户名称</span><span>北京市客户</span></p>
                                <p><span style="color:gary">真实姓名</span><span>王伟</span></p>
                                <p><span style="color:gary">客户电话</span><span>——</span></p>
                                <p><span style="color:gary">客户邮箱</span><span>——</span></p>
                                <p><span style="color:gary">客户公司</span><span>——</span></p>
                                <p><span style="color:gary">客户地址</span><span>——</span></p>
                                <p><span style="color:gary">客户等级</span><span>普通客户</span></p>
                                <p><span style="color:gary">客户来源</span><span>访客转化</span></p>
                                <p><span style="color:gary">客户备注</span><span>——</span></p>
                                <p><span style="color:gary">客户标签</span><span style="color:white;background:#2ed477">已上市</span><span style="color:white;background:#2ed477;margin-left:5px">已上市</span></p>
                            </div>
                        </el-form-item>

                    </div>
                </el-tab-pane>
                <el-tab-pane label="历史通话" name="second">去电</el-tab-pane>
                <el-tab-pane label="历史工单" name="second1">去电123456</el-tab-pane>
            </el-tabs>
        </div>



    </div>
</template>


<script setup>
import { reactive, ref } from 'vue'
const form = reactive({
    name: ''
})
const ruleForm = reactive({
    name: '',
    region: '',
    region1: '',

})
import {
    Search
} from "@element-plus/icons-vue";


const activeName = ref('first')
const activeName1 = ref('first')

const handleClick = (tab, event) => {
    console.log(tab, event)
}
const handleClick1 = (tab, event) => {
    console.log(tab, event)
}

</script>

<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
